<template>
	<view class="order">
		<view class="order-title">订单状态：{{detail.status_text}}</view>
		<view class="order-header">
			<view class="item-add">联系人：{{detail.name}}</view>
			<view class="item-add">电话号码：{{detail.mobile}}<image src="/static/img/dianh.png" style="width: 16px;height: 16px;margin-left: 10px;"></image></view>
			<view class="man-item" @click="navigation">
				<view class="item-header">
					<view class="item-add">地址：{{detail.province_text}}{{detail.city_text}}{{detail.area_text}}{{detail.street_text}}{{detail.address}}</view>
				</view>
				<view class="item-right">
					<image src='/static/img/daohang.png'></image>
					<view class="right-text">导航</view>
				</view>
			</view>
			<view class="order-time">
				<view class="time-text">预约时间 </view>
				<view class="time-num">{{detail.appointment}}</view>
			</view>
			<view class="order-time" style="margin-top: 10px;">
				<view class="time-text">回收地址 </view>
				<view class="time-num">{{detail.province_text}}{{detail.city_text}}{{detail.area_text}}{{detail.street_text}}{{detail.address}}</view>
			</view>
		</view>
		<view class="stats-text"><text class="linepice"></text>订单统计</text>
		</view>
		<view class="order-subject">
			<view v-if="detail.status == 2" class="sub-item" v-for="(item,index) in detail.orderlog" :key="index">
				<view class="sub-child">
					<image :src="item.icon||'/static/img/feizhi.png'" class="sub-img"></image>
					<view class="sub-con">
						<view style="color: rgba(36, 36, 36, 1);font-size: 15px;font-weight: bold;">{{item.name}}</view>
						<view style="color: rgba(36, 36, 36, 1);padding-top: 12px;">单价：¥{{item.money}}/公斤</view>
						<view style="color: rgba(36, 36, 36, 1);">重量：{{item.ordertype}}</view>
					</view>
					<view class="or-del" @click="deleteOrder(item.id)">删除</view>
				</view>
			</view>
			
			<view v-if="detail.status != 2" class="sub-item" v-for="(item,index) in detail.orderlog" :key="index">
				<view class="sub-child">
					<image :src="item.icon||'/static/img/feizhi.png'" class="sub-img"></image>
					<view class="sub-con">
						<view style="color: rgba(36, 36, 36, 1);font-size: 15px;font-weight: bold;">{{item.name}}</view>
						<view style="color: rgba(36, 36, 36, 1);padding-top: 12px;">单价：¥{{item.money}}/公斤</view>
						<view style="color: rgba(36, 36, 36, 1);">重量：{{item.ordertype}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="add-body" v-if="detail.status == 2">
			
			<view @click="openClassify" class="add_car">
				<view>添加品类</view>
			</view>
		</view>
		
		
		<view class="sub-wrapper">
			<view class="sub-money">
				<view class="mon-title">商品总价：</view>
				<view class="mon-num">≈¥{{detail.total}}</view>
			</view>
			<view class="sub-eit" v-if="detail.info">
				<view class="eit-title">留言备注：</view>
				<view class="eit-text">{{detail.info}}</view>
			</view>
		</view>
		<view class="sub-info">
			<view style="color: rgba(36, 36, 36, 1);font-size: 14px;font-weight: bold;padding-bottom: 14px;">订单信息</view>
			<view style="color: rgba(120, 120, 120, 1);padding-bottom: 8px;">订单号：{{detail.ordersn}}</view>
			<view style="color: rgba(120, 120, 120, 1);padding-bottom: 8px;">下单时间：{{detail.created}}</view>
		</view>
		
		<!--新任务-->
		<!-- <view class="sub-but">
			抢单
		</view> -->
		<!--已接单-->
		<view class="but-wrapper">
			<view v-if="detail.status == 1" class="weight-but" @tap.stop="open()">接单</view>
			<view v-else style="padding-right: 15px;display: flex;align-items: center;">
				<view class="but-con" v-if="detail.mobile" @click.stop="contactBuyer()">
					<image src="/static/img/tel.png"></image>
					<view class="con-text">联系买家</view>
				</view>
				<view class="but-ok" v-if="detail.status == 2" @click="hanldConfim()">
					<view class="ok-text">确认取货</view>
				</view>
			</view>
		</view>
		
		<!--接单-->
		<uni-popup ref="recash" type="center" style="z-index: 999;">
			<view class="cash">
				<!-- <image src="/static/img/dingdan.png" class="cash-img"></image> -->
				<view class="cash-title">确认接单</view>
				<view class="cash-but" @click="confirmOrder" style="margin-top: 20px;">
					<view class="cash-left">确认</view>
				</view>
				<image @click="closeRecash" src="/static/img/guanbi_icon.png" class="cash-guan"></image>
			</view>
		</uni-popup>
		
		
		
		
		<uni-popup ref="recashClassify" type="bottom" style="z-index: 200;">
			<view class="cash2">
				<view class="cash2-con" style="padding: 10px;">
					<scroll-view scroll-y show-scrollbar>
						<view class="cash2-list">
							<zzx-tabs :items="items" :current="current" @clickItem="onClickItem" ref="mytabs" :defaultColor='defaultColor'
							 :activeColor="activeColor" :acsize="acsize">
							</zzx-tabs>
							<view >
								<view v-for="(item,index) in areapriceList" :key="index">
									<view class="order-time2" @click="showWeight(item)">
										<view class="time-text2">
											<image src='/static/img/jian_icon.png' v-if="weightArr.length>0 && weightArr.join('').indexOf(item.id) != -1"
											 class="good-img2"></image>
											<image src='/static/img/add_icon.png' v-else class="good-img2"></image>
											{{item.name}}
										</view>
										<view class="time-num2" style="color: #FF6001;">{{item.price}}/公斤</view>
									</view>
									<view class="app-weight2" v-if="weightArr.length>0 && weightArr.join('').indexOf(item.id) != -1">
										<view class="stats-text"><text class="linepice"></text><text>选择预估重量</text>
										</view>
										<view class="wei-body2">
											<view v-for="(i,idx) in item.type" :key="idx">
												<view v-if="i.weiShow" class="wei-itme2 weiActive2" @click="chooseWei(item,i)">{{i.name}}</view>
												<view v-else class="wei-itme2" @click="chooseWei(item,i)">{{i.name}}</view>
											</view>
										</view>
									</view>
								</view>
								<!-- <view>
									<view class="order-time" v-for="(item,index) in areapriceList" @click="open(item)" :key="index">
										<view class="time-text">
											<image src='/static/img/add_icon.png' class="good-img"></image>
											{{item.name}}
										</view>
										<view class="time-num">{{item.price}}/公斤</view>
									</view>
								</view> -->
							</view>
						</view>
					</scroll-view>
				</view>
		
				<view class="cash-but3">
					<!-- <view @click="cancelBtn"  class="but-left3">
						取消
					</view> -->
					<view @click="confirmBtn" class="but-right3">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	let chooseArr = []
	import zzxTabs from "@/components/zzx-tabs/zzx-tabs.vue"
	export default {
		data() {
			return {
				detail:{},
				id:'',
				//
				//
				show_index: 0, //页面设置
				items: [],
				current: 0,
				defaultColor: '#000000',
				activeColor: '#FF6001',
				acsize: '14px',
				defaultValue: "", // 默认值
				
				areaid: '110101',
				cat: '',
				catIcon: '',
				garbagecateList: [],
				areapriceList: [],
				priceArea: '',
				clickType: 0,
				city: '',
				district: '',
				area:'',
				
				recycly_address: '',
				weightArr: [], //显示隐藏重量
				
				chooseWeiArr: [], //选择的重量
				
				info: '',
				recyclyTime: '', //回收时间
				
				popupHide: true, //弹框出现隐藏textarea输入框
				recyclingType: 1,
				catIcon: '',
				
				neworderlog:[],
			}
		},
		onLoad(options){
			if(options.id){
				this.id = options.id
			}
			this.getOrderDetail()
			this.getGarbagecate()
		},
		components: {
			zzxTabs
		},
		computed:{
			
		},
		methods: {
			openClassify(){
				chooseArr = []
				this.areapriceList.forEach((val,key) => {
					val.type.forEach((v,k) => {
						let resultChoose = this.detail.orderlog.some(itm => {
							if (itm.name == val.name && itm.type === v.type) {
								return true
							}
						})
						console.log(resultChoose)
						if(resultChoose){
							this.$set(v,'weiShow',true)
						}else{
							this.$set(v,'weiShow',false)
						}
					})
				})
				this.$refs.recashClassify.open()
			},
			confirmBtn(){
				//添加订单品类
				let formData = {
					orderid:this.detail.id,
					data:JSON.stringify(chooseArr)
				}
				this.$http.order_cat(formData).then(res => {
					if(res.code == 0){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						//赋值
						// this.neworderlog = chooseArr
						// var temp = {};
						// //去重
						// if(this.neworderlog && this.neworderlog.length>0){
						// 	this.neworderlog = this.neworderlog.reduce((prev, curv) => {
						// 		// 如果临时对象中有这个id，什么都不做
						// 		if (temp[curv.id]) {}
						// 		// 如果临时对象没有就把这个id加进去，同时把当前的这个对象加入到prev中
						// 		else {
						// 			temp[curv.id] = true;
						// 			prev.push(curv);
						// 		}
						// 		return prev
						// 	}, []);
						// }
						// console.log(this.neworderlog)
						this.getOrderDetail()
						this.$refs.recashClassify.close()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			cancelBtn(){
				this.$refs.recashClassify.close()
			},
			//删除订单
			deleteOrder(id){
				uni.showLoading()
				this.$http.orderlog_del({id:id}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 0){
						this.getOrderDetail()
					}
				})
			},
			
			
			//切换回收类型
			onClickItem(e) {
				//切换回收类型清空数据
				this.areapriceList = []
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
					this.garbagecateList.forEach((val, key) => {
						if (key == e.currentIndex) {
							this.cat = val.id
							this.catIcon = val.icon
							setTimeout(() => {
								this.getareaprice();
							}, 50)
						}
					})
				}
			},
					
			//显示重量
			showWeight(item) {
				console.log(this.weightArr)
				if (this.weightArr.length > 0 && this.weightArr.join('').indexOf(item.id) != -1) {
					this.weightArr.splice(this.weightArr.join('').indexOf(item.id), 1)
				} else {
					this.weightArr.push(item.id)
				}
			},
			
			//选择重量
			chooseWei(item, i) {
				this.areapriceList.forEach((val) => {
					if (val.id == item.id) {
						val.type.forEach((v) => {
							//设置选中
							if (v.type === i.type) {
								this.$set(v, 'weiShow', i.weiShow ? false : true);
							} else {
								this.$set(v, 'weiShow', false);
							}
						})
					}
				})
				
				this.areapriceList.forEach((val) => {
					val.type.forEach((v) => {
						//当前选中
						if (val.id == item.id && v.weiShow) {
							//选中数组中已存在当前点击类目
							let resultChoose = chooseArr.some(itm => {
								if (itm.id == item.id) {
									return true
								}
							})
							//选中数组中已存在当前点击类目，替换重量
							if(chooseArr.length > 0 && resultChoose){
								chooseArr.forEach((_v) => {
									if(_v.id == item.id){
										_v.ordertype = v.mintotal+'~'+v.maxtotal+'公斤'
										_v.type = v.type
									}
								})
							}else{
								//选中数组中不存在当前点击类目，存入数组
								chooseArr.push({
									icon: val.icon,
									id: val.id,
									type: v.type,
									name: val.name,
									money: val.price,
									price:'',
									weight:'',
									ordertype: v.mintotal+'~'+v.maxtotal+'公斤',
								})
							}
						} else {
							//当前点击项去掉选中,删除数组元素
							if(val.id == item.id && v.type === i.type && !v.weiShow){
								chooseArr.forEach((v,index) => {
									if(v.id == item.id == val.id){
										chooseArr.splice(index,1)
									}
								})	
							}
						}	
					})
				})
				this.chooseArr = chooseArr
				// if(this.chooseWeiArr.length > 0 && this.chooseWeiArr.join('').indexOf(item.type) != -1){
				// 	this.chooseWeiArr.splice(this.chooseWeiArr.join('').indexOf(item.type),1)
				// }else{
				// 	this.chooseWeiArr.push(item.type)
				// }
			},
			//分类类别
			getGarbagecate() {
				this.items = []
				this.$http.garbagecate().then(res => {
					if (res.data && res.data.length > 0) {
						this.garbagecateList = res.data
						res.data.forEach((val, key) => {
							this.items.push(val.name)
							if (this.current == key) {
								this.cat = val.id
								this.catIcon = val.icon
								setTimeout(() => {
									this.getareaprice();
								}, 50)
							}
						})
					}
				})
			},
			//获取区域价格、规格
			getareaprice() {
				let params = {
					areaid: this.detail.street,
					cat: this.cat
				}
				this.$http.areaprice(params).then(res => {
					if (res.data && res.data.length > 0) {
						this.areapriceList = res.data
						console.log(this.detail.orderlog)
						this.areapriceList.forEach((val,key) => {
							val.type.forEach((v,k) => {
								let resultChoose = this.detail.orderlog.some(itm => {
									if (itm.id == val.id && itm.type === v.type) {
										return true
									}
								})
								console.log(resultChoose)
								if(resultChoose){
									this.$set(v,'weiShow',true)
								}else{
									this.$set(v,'weiShow',false)
								}
							})
						})
					}
				})
			},
			
			//联系买家
			contactBuyer(){
				let that = this
				uni.makePhoneCall({
					// 手机号
					phoneNumber: that.detail.mobile, 
				});
			},
			open() {
				this.$refs.recash.open()
			},
			closeRecash() {
				this.$refs.recash.close()
			},
			//导航
			navigation(){
				wx.openLocation({//​使用微信内置地图查看位置。
					type: 'gcj02', //返回可以用于wx.openLocation的经纬度
					latitude: parseFloat(this.detail.lat),//要去的纬度-地址
					longitude: parseFloat(this.detail.lon),//要去的经度-地址
					name: this.detail.street_text+this.detail.address,
				})
				// var o = {
				// 	name: this.detail.street_text+this.detail.address,
				// 	location: {
				// 		lat: this.detail.lat,
				// 		lng: this.detail.lon,
				// 	}
				// };
				// uni.navigateToMiniProgram({
				// 	appId: 'wx7643d5f831302ab0',
				// 	path:"pages/multiScheme/multiScheme?endLoc=" + JSON.stringify(o) + "&qbMode=0",
				// 	success(res) {
				// 		// 打开成功
				// 	}
				// })
				console.log('导航')
				// let plugin = requirePlugin('routePlan')
				// let key = uni.getStorageSync('mapKey')?uni.getStorageSync('mapKey'):'PBMBZ-NWPW3-6GJ3P-YPKQ7-4IED5-5PBF4'
				// let referer = '花呗回收'
				// let endPoint = JSON.stringify({
				// 	'name':'目的地',
				// 	'latitude':this.detail.lat,
				// 	'longitude':this.detail.lon
				// })
				// uni.navigateTo({
				// 	url:'plugin://routePlan/index?key='+ key + '&referer='+referer +'&endPoint='+endPoint
				// })
			},
			//订单详情
			getOrderDetail(){
				//orderdetail
				let params = {
					id:this.id
				}
				this.$http.rider_order_detail(params).then(res => {
					this.detail = res.data
					this.neworderlog = this.detail.orderlog
				})
			},
			//确认抢单
			confirmOrder(){
				uni.showLoading({})
				this.$http.orders({id:this.id}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 0){
						this.$refs.recash.close()
						this.getOrderDetail();
					}
				})
			},
          hanldConfim(){
			  if(this.detail.orderlog && this.detail.orderlog.length>0){
				  uni.navigateTo({
				  	url:'confirmReceipt?detail='+JSON.stringify(this.detail)
				  })
			  }else{
				  uni.showToast({
				  	title:'请添加品类',
				  	icon:'none'
				  })
			  }
		  }
		}
	}
</script>

<style scoped>
	.linepice2{
		width: 24upx;height: 8upx;background: #2B2A29;border-radius: 8upx;display: block;margin-right: 5px;
	}
	.add_car{
		width: 233upx;
		height: 97upx;
		

background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		border-radius: 49upx;
		line-height: 97upx;
		color: #FFFFFF;
		text-align: center;
		font-size: 14px;
		margin: 10px auto;
	}
	.or-del{
		font-size: 14px;
		color: #FE4744;
	}
	.add-body{
		margin: 0 10px;
	}
	.linepice{
		width: 24upx;height: 8upx;background: #2B2A29;border-radius: 8upx;display: block;margin-right: 5px;
	}
	.order {
		background-color: #F6F6F6;
		width: 100%;
		min-height: 100%;
	}

	.order-title {
		color: rgba(36, 36, 36, 1);
		font-size: 15px;
		font-weight: bold;
		padding: 17px 0;
		text-align: center;
	}

	.order-header {
		background-color: #FFFFFF;
		padding: 15px 20px;
	}

	.man-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 14px;
	}

	.item-header {
		width: 80%;
	}

	.item-right {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 20%;
		justify-content: flex-end;
		color: #FF6001;
		font-size: 15px;
		font-weight: bold;
	}

	.right-text {
		margin-left: 6px;
		color: #FF6001;
	}

	.item-right image {
		width: 24px;
		height: 24px;
		vertical-align: middle;
	}

	.item-add {
		color: #242424;
		font-size: 14px;
		font-weight: bold;
		padding-bottom: 10px;
	}

	.order-time {
		display: flex;
		background-color: rgba(187, 187, 187, 0.1);
		padding: 13px 7px;
		border-radius: 5px;
		align-items: center;
	}
	
	.time-text {
		color: rgba(52, 54, 51, 1);
		font-size: 14px;
		min-width: 70px;
	}
	
	.time-num {
		color: rgba(36, 36, 36, 1);
		font-size: 15px;
		margin-left: auto;
		text-align: right;
		padding-left: 20px;
	}
	
.eit-text{
	width: 510upx;
}
	.stats-text {
		font-size: 17px;
		font-weight: bold;
		padding: 10px 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.stats-num {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.order-subject{
		display: flex;
		flex-direction: column;
	}
	.sub-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 20px;
		margin-bottom: 10px;
	}
	
	.sub-img{
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
	
		
	.sub-child{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}
	.sub-con{
		    flex: 1;
			padding-left: 16px;
	}
	.sub-wrapper{
		background-color: #FFFFFF;
		
	}
	.sub-money{
		padding: 17px 23px;
		border-bottom: 1px solid rgba(246, 246, 246, 1);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.mon-title{
		color: rgba(36, 36, 36, 1);
		font-size: 14px;
		font-weight: bold;
	}
	.mon-num{
		color: #FF6001;
		font-size: 18px;
		font-weight: bold;
	}
	.sub-eit{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 15px 23px 48px 23px;
	}
	.eit-title{
		color: rgba(36, 36, 36, 1);
		font-size: 14px;
		font-weight: bold;
		min-width: 80px;
	}
	.sub-info{
		background-color: #fff;
		margin-top: 10px;
		padding: 15px 20px 100px 20px;
	}
	.sub-but{
		width: 100%;
		height:108upx;
		

background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);


box-shadow: 0px 4px 8px 0px #FFAB71;
		position: fixed;
		bottom: 0;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		line-height: 108upx;
		color: #FFFFFF;
	}
	
	/*已接单*/
	.but-con {
		display: flex;
		flex-direction: row;
		width: 208upx;
		height: 60upx;
		border-radius: 10upx;
		border: 1px solid rgba(52, 54, 51, 1);
		font-size: 14px;
		color: #242424;
		text-align: center;
		line-height: 60upx;
		align-items: center;
		justify-content: center;
	}
	
	.but-ok {
		display: flex;
		flex-direction: row;
		width: 289upx;
		height: 80upx;
		
		

background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
box-shadow: none;
		border-radius: 10upx;
		font-size: 18px;
		color: #FFFFFF;
		text-align: center;
		line-height: 80upx;
		align-items: center;
		justify-content: center;
		margin-left: 14px;
	}
	
	.but-con image {
		width: 16px;
		height: 16px;
	}
	
	.con-text {
		padding-left: 4px;
	}
	
	.but-wrapper {
		    display: flex;
		    flex-direction: row;
		    justify-content: flex-end;
		    align-items: center;
		    position: fixed;
		    width: 100%;
		    bottom: 0;
		    right: 0;
			padding: 20px 0;
		    background-color: #fff;
	}
	.weight-but {
		width: 100%;
		height: 54px;
		
		
background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
box-shadow: none;
		font-size: 18px;
		color: #fff;
		text-align: center;
		line-height: 54px;
	}
	
	/**/
	.cash {
		height: 226px;
		width: 548upx;
		background-color: #fff;
		border-radius: 10px;
		text-align: center;
		padding: 0 25px;
		position: relative;
		border: 4upx solid #FF6001
	}
	
	.cash-but {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 50px;
	}
	
	.cash-title {
		color: rgba(48, 52, 76, 1);
		font-weight: bold;
		font-size: 23px;
		padding: 20px 0;
	}
	
	.cash-text {
		color: #666666;
		text-align: left;
		font-size: 14px;
	}
	
	.cash-left {
		width: 555upx;
		height: 88upx;
		
		
background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
box-shadow: none;
		border-radius: 48upx;
		text-align: center;
		line-height: 88upx;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
	}
	
	.cash-right {
		width: 228upx;
		height: 34px;
		background: rgba(255, 95, 73, 1);
		border-radius: 5px;
		color: #fff;
		font-size: 14px;
		line-height: 34px;
	}
	
	.cash-img {
		width: 54px;
		height: 54px;
		margin-top: -54upx;
	}
	
	.cash-guan {
		width: 21px;
		height: 21px;
		position: absolute;
		right: 20px;
		top: 20px;
	}
	
	/**/
	.right-img {
			width: 27px;
			height: 27px;
			vertical-align: middle;
		}
	
		.order-time2 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background-color: rgba(187, 187, 187, 0.1);
			padding: 13px 7px;
			border-radius: 5px;
			margin-bottom: 10px;
		}
	
		.time-text2 {
			color: #343633;
			font-size: 13px;
			font-weight: bold;
		}
	
		.time-num2{
			font-size: 13px;
			font-weight: bold;
		}
	
		.good-img2 {
			width: 19px;
			height: 19px;
			vertical-align: bottom;
			margin-right: 10px;
		}
	
		.app-prompt {
			background-color: rgba(187, 187, 187, 0.1);
			padding: 10px 15px 18px 15px;
			color: rgba(52, 54, 51, 1);
			font-size: 13px;
			font-weight: bold;
		}
	
		.prom-img {
			width: 20px;
			height: 20px;
			vertical-align: bottom;
			margin-right: 5px;
		}
	
		.prom-text {
			color: #FF2512;
			padding-top: 10px;
		}
	
		.stats-text {
		}
	
		.door-wrapper {
			display: flex;
			flex: 2;
			align-items: center;
			justify-content: flex-end;
	
		}
	
		.time-door {
			background-color: rgba(187, 187, 187, 0.1);
			height: 68upx;
			color: #242424;
			text-align: center;
			line-height: 68upx;
			width: 45%;
			border: 1px solid #E9F1FF;
			border-radius: 20px 0px 0 20px;
			font-weight: bold;
			border-right: none;
		}
	
		.time-door.select {
			color: #FFFFFF;
			height: 68upx;
			
	
background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		}
	
		.time-input.select {
			color: #FFFFFF;
			height: 70upx;
			
background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
		}
	
		.time-input {
			display: flex;
			border: 1px solid #E9F1FF;
			border-left: none;
			border-radius: 0px 20px 20px 0px;
			align-items: center;
			width: 45%;
			background-color: rgba(187, 187, 187, 0.1);
			color: rgba(36, 36, 36, 1);
			height: 68upx;
		}
	
		.time-input .value {
			width: 100%;
			position: relative;
			z-index: 200;
		}
	
		.appbut {
			border-radius: 25px;
			height: 96upx;
			background:#fff;
			width: 100%;
			position: fixed;
			bottom: 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			z-index: 99999999;
			border:1px solid #979797
		}
	
		.he-img {
			width: 40px;
			height: 40px;
		}
	
		.but-he {
			display: flex;
			flex-direction: row;
			align-items: center;
			color: #151515;
			font-size: 15px;
			position: relative;
			padding: 0 56upx;
			height: 96upx;
		}
	
		.but-num {
			width: 18px;
			height: 18px;
			line-height: 18px;
			background: rgba(254, 71, 68, 1);
			border-radius: 50%;
			position: absolute;
			text-align: center;
			left: 48px;
			top: 3px;
			color: #fff;
		}
	
		.but-cash {
			margin-left: 10px;
		}
	
		.appbut-ok {
			color: #fff;
			font-size: 14px;
			font-weight: bold;
			text-align: center;
			width: 220upx;
			height: 96upx;
			border-radius: 25px ;
		
	
background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
			line-height: 96upx;
		}
		
		/*添加样式*/
		.order-time2 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				background-color: rgba(187, 187, 187, 0.1);
				padding: 13px 7px;
				border-radius: 5px;
				margin-bottom: 10px;
			}
		
			.time-text2 {
				color: #343633;
				font-size: 13px;
				font-weight: bold;
			}
		
			.time-num2 {
				color: #FF3D29;
				font-size: 13px;
				font-weight: bold;
			}
		
			.good-img2 {
				width: 19px;
				height: 19px;
				vertical-align: bottom;
				margin-right: 10px;
			}
		
			.app-prompt2 {
				background-color: rgba(187, 187, 187, 0.1);
				padding: 10px 15px 18px 15px;
				color: rgba(52, 54, 51, 1);
				font-size: 13px;
				font-weight: bold;
			}
		
			.prom-img2 {
				width: 20px;
				height: 20px;
				vertical-align: bottom;
				margin-right: 5px;
			}
		
			.prom-text2 {
				color: #FF2512;
				padding-top: 10px;
			}
		
			.stats-text3{
				padding: 11px 0 14px 0;
			}
		
			.door-wrapper2 {
				display: flex;
				flex: 2;
				align-items: center;
				justify-content: flex-end;
		
			}
		
			.time-door2 {
				background-color: rgba(187, 187, 187, 0.1);
				height: 68upx;
				color: #242424;
				text-align: center;
				line-height: 68upx;
				width: 45%;
				border: 1px solid #E9F1FF;
				border-radius: 20px 0px 0 20px;
				font-weight: bold;
				border-right: none;
			}
		
			.time-door.select2 {
				color: #FFFFFF;
				height: 68upx;
				
		
background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
			}
		
			.time-input.select2 {
				color: #FFFFFF;
				height: 70upx;
				
background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
			}
		
			.time-input2 {
				display: flex;
				border: 1px solid #E9F1FF;
				border-left: none;
				border-radius: 0px 20px 20px 0px;
				align-items: center;
				width: 45%;
				background-color: rgba(187, 187, 187, 0.1);
				color: rgba(36, 36, 36, 1);
				height: 68upx;
			}
		
			.time-input2 .value2 {
				width: 100%;
				position: relative;
				z-index: 200;
			}
		
			.appbut2 {
				border-radius: 25px;
				height: 96upx;
				background:#fff;
				width: 100%;
				position: fixed;
				bottom: 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				z-index: 99999999;
				border:1px solid #979797
			}
		
			.he-img2 {
				width: 40px;
				height: 40px;
			}
		
			.but-he2 {
				display: flex;
				flex-direction: row;
				align-items: center;
				color: #151515;
				font-size: 15px;
				position: relative;
				padding: 0 56upx;
				height: 96upx;
			}
		
			.but-num2 {
				width: 18px;
				height: 18px;
				line-height: 18px;
				background: rgba(254, 71, 68, 1);
				border-radius: 50%;
				position: absolute;
				text-align: center;
				left: 48px;
				top: 3px;
				color: #fff;
			}
		
			.but-cash2 {
				margin-left: 10px;
			}
		
			.appbut-ok2 {
				color: #fff;
				font-size: 14px;
				font-weight: bold;
				text-align: center;
				width: 220upx;
				height: 96upx;
				border-radius: 25px ;
			
		
background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
				line-height: 96upx;
			}
		
			/*重量*/
		
			.wei-body2 {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			}
		
			.wei-itme2 {
				width: 200upx;
				height: 58upx;
				background: rgba(187, 187, 187, 0.1);
				border-radius: 11upx;
				border: 1px solid rgba(151, 151, 151, 1);
				text-align: center;
				line-height: 58upx;
				margin-right: 20upx;
				margin-bottom: 13px;
			}
		
			.weiActive2 {
				

background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
				
box-shadow: 0px 4px 8px 0px #FFAB71;
				border-radius: 11px;
				color: #FFFFFF;
				border: none;
			}
		
			/*商品栏弹框*/
			.cash2 {
				height: 940upx;
				background: rgba(255, 255, 255, 1);
				border-radius: 25px 25px 0px 0;
			}
		
			.cash-guan2 {
				width: 46upx;
				height: 46upx;
				position: absolute;
				right: 40upx;
				top: 42upx;
			}
		
			.cash-header2 {
				border-bottom: 1px solid rgba(217, 217, 219, 1);
				text-align: center;
				display: flex;
				    flex-direction: revert;
				    justify-content: center;
			}
		
			.order-subject2 {
				display: flex;
				flex-direction: column;
				height: 660upx;
				overflow: scroll;
			}
		
			.sub-item2 {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				background-color: #FFFFFF;
				padding: 20px;
				border-bottom: 1px solid #EDEDED
			}
		
			.sub-img2 {
				width: 50px;
				height: 50px;
				border-radius: 50%;
			}
		
		
			.sub-child2 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				width: 100%;
			}
		
			.sub-con2 {
				flex: 1;
				padding-left: 16px;
			}
		
			.add_img2 {
				width: 28px;
				height: 28px;
				margin-top: 70upx;
			}
		
			
		
			.cash-guan2 {
				width: 46upx;
				height: 46upx;
				position: absolute;
				right: 40upx;
				top: 42upx;
			}
		
			.cash-fei2 {
				width: 50px;
				height: 50px;
			}
		
			.cash-wrapper2 {
				display: flex;
				flex-direction: column;
				width: 100%;
				margin-top: 14px;
			}
		
			.cash-item2 {
				height: 92upx;
				background: rgba(187, 187, 187, 0.1);
				border-radius: 10upx;
				align-items: center;
				justify-content: space-between;
				display: flex;
				flex-direction: row;
				margin-bottom: 6px;
				padding: 0 12px;
			}
		
			.cash-left2 {
				color: rgba(52, 54, 51, 1);
				font-size: 14px;
			}
		
			.cash-right2 {
				color: rgba(36, 36, 36, 1);
				font-size: 15px;
				font-weight: bold;
			}
		
			.cash-num2 {
				margin: 20px 0;
				color: rgba(20, 16, 16, 1);
				font-size: 18px;
				font-weight: bold;
			}
		
			.cash-but2 {
				width: 750upx;
				height: 96upx;
				
				
background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
				
		
box-shadow: 0px 4px 8px 0px #FFAB71;
				border-radius: 48upx;
				text-align: center;
				font-size: 16px;
				line-height: 96upx;
				font-weight: bold;
				position: fixed;
				bottom: 0;
				color: #FFFFFF;
			}
		
		
			.order>>>.zzx-tabs .zzx-tabs-bar .zzx-bottom-line {
				background-color: #FF6001;
			}
			
			.cash-but3 {
				display: flex;
				flex-direction: row;
				position: fixed;
				bottom: 0;
				justify-content: space-between;
				width: 100%;
			}
			
			.but-right3 {
				

background: linear-gradient(90deg, #FFC500 0%, #FF5F01 100%);
				

box-shadow: 0px 4px 8px 0px #FFAB71;
				width: 100%;
				height: 48px;
				text-align: center;
				font-size: 16px;
				color: #fff;
				font-weight: bold;
				line-height: 48px;
			}
			.cash2-list {
				display: flex;
				flex-direction: column;
				height: 370px;
				margin-bottom: 50px;
			}
			
</style>
